<template name="member">
	<view>
		<scroll-view scroll-y class="page">
			<cu-custom :bgImage="bgImg">
				<block slot="content">
					<image src="/static/member.png" mode="aspectFill" style="width: 260upx;height: 60upx;"></image>
				</block>
			</cu-custom>
			
			<!-- <view class="cu-list menu sm-border card-menu margin-top margin-bottom">
				<view class="cu-item" style="height: 90px; background-size: 100% 100%; background-repeat: no-repeat; -moz-background-size:100% 100%;background-image:url(https://bb.naruto12fans.top/Upload/starry.png)">
					<view class="content">
						<view class="flex flex-wrap" >
							<text style="color: #fff;font-size: 40upx;font-weight: 300;transform: skew(-10deg, 0deg);position: relative;text-shadow: 0px 0px 6upx rgba(0, 0, 0, 0.3)">黑盒子成员展示</text>
							<view class="basis-xl"></view>
						</view>
						
					</view>
				</view>
			</view> -->
			
			<swiper class="card-swiper margin-top square-dot" :indicator-dots="true" :circular="true"
			 :autoplay="true" interval="5000" duration="500" @change="cardSwiper" indicator-color="#8799a3"
			 indicator-active-color="#0081ff" :style="[{height: windowHeight + 'px !important'}]">
				<swiper-item v-for="(item,index) in swiperList" :key="index" :class="cardCur==index?'cur':''">
					<view class="swiper-item">
						<image :src="item.img" style="height: 40%;border-radius: 20px 20px 0 0;"></image>
						<view class="cu-card dynamic">
							<view class="cu-item shadow" style="margin: unset;border-radius: 0 0 20px 20px;">
								<view class="cu-list menu-avatar">
									<view class="cu-item">
										<view class="content flex-sub" style="left: 15px;">
											<view style="font-size: 20px; font-weight: bolder;">{{item.name}}</view>
											<view class="text-gray text-sm flex justify-between" style="margin-top: 5px;">
											黑盒子担当 —— {{item.position}}
											</view>
										</view>
									</view>
								</view>
								<view class="text-content margin-top-xl margin-left-xl">
									<view style="font-size: 16px; font-weight: 600;">
										昵   称
									</view>
									<view style="font-weight: 200;color: #CCCCCC;">
										{{item.nickname}}
									</view>
								</view>
								<view class="text-content margin-top-xs margin-left-xl">
									<view style="font-size: 16px; font-weight: 600;">
										特   长
									</view>
									<view style="font-weight: 200;color: #CCCCCC;">
										{{item.talent}}
									</view>
								</view>
								<view class="text-content margin-top-xs margin-left-xl" style="margin-bottom: 35px;">
									<view style="font-size: 16px; font-weight: 600;">
										座  右  铭
									</view>
									<view style="font-weight: 200;color: #CCCCCC;">
										{{item.remark}}
									</view>
								</view>
							</view>
						</view>
					</view>
					
				</swiper-item>
			</swiper>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				cardCur: 0,
				windowHeight: 600,
				towerStart: 0,
				swiperList: [],
				direction: '',
				bgImg: this.imgPath+'starry.png'
			}
		},
		mounted() {
			
			uni.getSystemInfo({
			    success: function (res) {
					this.windowHeight = res.windowHeight*0.8
			    }
			});
			this.showUserList()
		},
		methods: {
			ViewImage(img) {
				let imgList = []
				imgList.push(img)
				uni.previewImage({
					urls: imgList,
					current: imgList[0]
				});
			},
			// cardSwiper
			cardSwiper(e) {
				this.cardCur = e.detail.current
			},
			// 初始化towerSwiper
			TowerSwiper(name) {
				let list = this[name];
				for (let i = 0; i < list.length; i++) {
					list[i].zIndex = parseInt(list.length / 2) + 1 - Math.abs(i - parseInt(list.length / 2))
					list[i].mLeft = i - parseInt(list.length / 2)
				}
				this.swiperList = list
			},
			TowerStart(e) {
				this.towerStart = e.touches[0].pageX
			},
			
			// towerSwiper计算方向
			TowerMove(e) {
				this.direction = e.touches[0].pageX - this.towerStart > 0 ? 'right' : 'left'
			},
			
			// towerSwiper计算滚动
			TowerEnd(e) {
				let direction = this.direction;
				let list = this.swiperList;
				if (direction == 'right') {
					let mLeft = list[0].mLeft;
					let zIndex = list[0].zIndex;
					for (let i = 1; i < this.swiperList.length; i++) {
						this.swiperList[i - 1].mLeft = this.swiperList[i].mLeft
						this.swiperList[i - 1].zIndex = this.swiperList[i].zIndex
					}
					this.swiperList[list.length - 1].mLeft = mLeft;
					this.swiperList[list.length - 1].zIndex = zIndex;
				} else {
					let mLeft = list[list.length - 1].mLeft;
					let zIndex = list[list.length - 1].zIndex;
					for (let i = this.swiperList.length - 1; i > 0; i--) {
						this.swiperList[i].mLeft = this.swiperList[i - 1].mLeft
						this.swiperList[i].zIndex = this.swiperList[i - 1].zIndex
					}
					this.swiperList[0].mLeft = mLeft;
					this.swiperList[0].zIndex = zIndex;
				}
				this.direction = ""
				this.swiperList = this.swiperList
			},
			showUserList() {
				uni.request({
					url: this.serverPath + 'user/postUserList',
					method: 'POST',
					header:{
						'Content-type':'application/x-www-form-urlencoded'
					},
					success:(res)=> {
						this.swiperList = res.data.data
						this.TowerSwiper('swiperList');
					}
				})
			}
		}
	}
</script>

<style>
	.tower-swiper .tower-item {
		transform: scale(calc(0.5 + var(--index) / 10));
		margin-left: calc(var(--left) * 100upx - 150upx);
		z-index: var(--index);
	}
</style>
